<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每本书详情</title>
    <!-- layui样式文件 -->
    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
    <!-- layui脚本文件 -->
    <script src="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>

    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/2.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-getUrlParam.js') }}"></script>

    <link rel="stylesheet" href="{{ url_for('static',filename='magnifier/magnifier.css') }}">
    <link rel="stylesheet" href="../../static/layuimini/lib/layui-v2.6.3/css/layui.css">
    <script type="text/javascript" src="{{ url_for('static',filename='magnifier/Magnifier.js') }}"></script>
    <script type="text/javascript" src="../../static/layuimini/lib/layui-v2.6.3/layui.js"></script>
    <style type="text/css">
        div.search{
            height: 40px;
             width: 500px;
        }
        div.search form{
            width: 100%;
            height: 100%;
        }
        div.search form input:nth-child(2){
            width: 400px;
            height: 100%;
            font-size: 16px;
            text-indent: 40px;
            border: none;
            float: left;
        }
        div.search form input:nth-child(3){
            width: 100px;
            height: 100%;
            font-size: 16px;
            letter-spacing: 5px;
            border: none;
        }
        div.search form img{
            position: absolute;
            left: 250px;
            transform: translateX(-250px);
            margin-top: 10px;
            margin-left: 10px;
            height: 20px;
            width: 20px;
        }
        #comment .commet1{
            width: 860px;
            {#background-color: papayawhip;#}
            margin: 5px auto;
            display: flex;
        }
        .touxiang{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            {#background: url("../../static/image/头像/头像.png");#}
            {#margin: 8px;#}
            margin-right: 15px;
        }
        .say{
            width: 800px;
            margin-top: 8px;
        }
        .username{
            font-size: 16px;
            display: flex;
        }
        .layui-rate {
            padding: 0;
        }
        #tags{
            margin-top: 5px;
        }
        #tags .tag{
            font-size: 12px;
            border: 1px solid #eaeaea;
            border-radius: 2px;
            color: #888;
            margin-right: 8px;
        }
        .time{
            color: #888;
            font-size: 12px;
            margin-top: 5px;
        }
        table{
            width: 400px;
            height: 135px;
            margin-left: 10px;
            margin-top: 10px;
        }
        tbody tr td:first-child{
            width: 120px;
        }
        .layui-progress-big, .layui-progress-big .layui-progress-bar {
            height: 10px;
            line-height: 10px;
        }
        #hello12{
            float: right;
            top: 40px;
            right: 250px;
            position: absolute;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
    </script>
    <script>
        layui.use('layer', function(){
            var layer = layui.layer;
        });
        $('#test-left-img').magnifier();
    </script>
</head>
<body>
<!--头部-->
<div id="header">
    <div class="logo"><img src="{{ url_for('static',filename='image/book.png') }}"><span>彩阳书店</span></div>
    <div class="search">
        <form action="#" method="">
            <img src="{{ url_for('static',filename='image/搜索.png') }}" alt="">
            <input type="text" id="searchBox1" name="condition" placeholder="请输入搜索书名">
            <input type="button" id="searchs" value="搜索">
        </form>
    </div>
    <div class="header-right">
            <ul style="background-color: rgb(179,190,245)!important;" class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.soucang') }}">收藏</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.showOrder') }}">订单</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for("product.cart") }}">购物车</a></li>
                <li class="layui-nav-item">
                    <a style="font-size: 18px;color: black" href="javascript:;">管理</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="{{ url_for("person.changePass") }}">修改密码</a></dd>
                        <dd><a href="{{ url_for("person.userInfo") }}">个人资料</a></dd>
                        <dd><a href="{{ url_for("person.showAdd") }}">收货管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
</div>
<!--返回首页-->
<div id="tui">
    <span id="sp11"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp;/
    <span id="sp22"><a style="text-decoration: none;color: black;cursor: pointer" id="hello" class="fanhuibtn">{{ book['sort'] }}</a></span>&nbsp;/
    <span id="sp33">{{ book['bookname'] }}</span>
</div>
<!--书籍详情卡片-->
<div id="test">
    <div id="test-left" style="position:relative;">
        <img id="test-left-img" src="../../static/image/detail/{{ book['src'] }}" >
    </div>

    <div id="test-right">
        <div id="test-1">
            <span id="name">{{ book['bookname'] }}</span>&nbsp;<span id="zhuanye">{{ book['sort'] }}</span>
        </div>
        <div id="test-2">
            简介：<br><span id="content1">{{ book['bookdinfo'] }}</span>
        </div>
        <div id="test-3">
            <div id="author">作者：<span id="author-1">{{ book['bookauthor'] }}</span></div>
            <div id="price">单价：<span id="price-1">{{ book['bookprice'] }}</span>元</div>
        </div>
    </div>
</div>
<!--购买卡片-->
<div id="buy">
    <div id="count">
        <div id="count1">
            购买数量：
            <input id="jian" type="button" value="-">
            <input id="shulaing" type="text" readonly="readonly" value="1">
            <input id="jia" type="button" value="+">
        </div>
        <div id="count2">合计：<span id="jiage">{{ book['bookprice'] }}</span>元</div>
    </div>
    <div id="buy1">
        <button id="shoucang">加入收藏</button>
        <button id="gouwuche">加入购物车</button>
        <button id="goumai">立即购买</button>
    </div>
</div>

<div id="main2" style="width: 900px;margin: 20px auto">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">商品评价</li>
            <li>售后保障</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" style="width: 880px;margin: 0 auto">
                <div style="width:870px;height: 180px;border: 1px solid purple;margin: 0 auto;position: relative ">
                    <p style="margin-left: 10px">用户评分：{{ all.avg }}星（共{{ all.people }}人参与）</p>
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            {% for x in range(5) %}
                                <tr style="">
                                    <td align="right">
                                        {% for y in range(5-x) %}
                                            <img style="width: 15px;height: 15px;margin: 0" src="../../static/image/星星2%20(1).png">&nbsp;
                                        {% endfor %}
                                    </td>
                                    <td style="width: 30px;padding-left: 5px">{{ counts[x] }}人</td>
                                    <td style="width: 220px">
                                        <div class="layui-progress layui-progress-big">
                                            <div class="layui-progress-bar" lay-percent="{{ countpercent[x] }}"></div>
                                        </div>
                                    </td>
                                    <td style="padding-left: 10px">{{ countpercent[x] }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% if all.people==0 %}
                        <h3 id="hello12">该商品暂无评论！</h3>
                    {% endif %}
                </div>
                <div style="width: 870px;margin: 0 auto">
                    <ul id="comment">
                        {% for comment in comments %}
                            <li class="commet1">
                                <div class="touxiang"><img style="border-radius:50%;width: 30px;height: 30px"  src="../../static/image/头像/淘宝.png"></div>
                                <div class="say">
                                    <div class="username">
                                        <span>陈标</span>&nbsp;&nbsp;
                                        <div>
                                            {% for s in range(comment.star) %}
                                                <img style="width: 20px;height: 20px;margin: 0" src="../../static/image/星星2%20(1).png">
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div style="margin-top: 5px">{{ comment.say }}</div>
                                    <div id="tags">
                                        {% for tag in comment.tags %}
                                            <span class="tag">{{ tag }}</span>
                                        {% endfor %}
                                    </div>
                                    <div class="time">{{ comment.commentDate }}</div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="layui-tab-item" style="">
                <div style="border: 1px solid black;width:870px;height: 120px;margin: 0 auto;position: relative ">
                    <div style="margin-left: 10px;margin-top: 5px">
                        <h3 style="font-size: 16px;font-weight: bold;margin-bottom: 5px;color: rgb(179,190,245)">正品行货</h3>
                        <p style="color: grey">彩阳书店向您保证所售商品均为正品行货，彩阳书店自营商品开具机打发票或电子发票。</p>
                    </div>
                    <div style="margin-left: 10px;margin-top: 10px">
                        <h3 style="font-size: 16px;font-weight: bold;margin-bottom: 5px;color: rgb(179,190,245)">无忧退货</h3>
                        <p style="color: grey">客户购买彩阳书店自营商品7日内(含7日，自客户收到商品之日起计算)，在保证商品完好的前提下，可无理由退货。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="width: 100%;height: 60px;background-color: rgb(179,190,245)"></div>

<!--管理列表-->
<script type="text/javascript">
    $("#guanli_a").click(function () {
        $("#liebiao").toggle();
    });
</script>
<!--中间卡片显示书籍详情-->
<script type="text/javascript">
    var url=window.location.href;
    var param=url.split("/")
    var id=param[param.length-1]
    let name=$.getUrlParam("name");
    console.log(id);
    console.log(name);
    document.getElementById("hello").onclick=function () {
        type=document.getElementById("zhuanye").innerText;
        if(type=="文学"){
            document.getElementById("hello").href="{{ url_for("index.wenxue") }}";
        }else if(type=="科幻经典"){
            document.getElementById("hello").href="{{ url_for("index.kehuan") }}";
        }else if(type=="历史"){
            document.getElementById("hello").href="{{ url_for("index.lishi") }}";
        }else if(type=="专业书"){
            document.getElementById("hello").href="{{ url_for("index.zhuanye") }}";
        }
    }
</script>
<!--数量加减以及价格变化-->
<script type="text/javascript">
    document.getElementById("jia").onclick=function () {
        var text=document.getElementById("shulaing");
        text.value++;
        var jiage=document.getElementById("jiage");
        jiage.innerText=text.value*document.getElementById("price-1").innerText;
        // console.log(jiage.innerText);
    }
    document.getElementById("jian").onclick=function () {
        var text=document.getElementById("shulaing");
        if(text.value>=2){
            text.value--;
            var jiage=document.getElementById("jiage");
            jiage.innerText=text.value*document.getElementById("price-1").innerText;
        }
    }
</script>
<!--加入购物车按钮-->
<script type="text/javascript">
    layui.use(['jquery','layer','element','rate'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        var element = layui.element;
        var rate = layui.rate;

        //基础效果
        rate.render({
            elem: '#test1'
            ,value: 4
            ,readonly: true
        })
        //点击加入购物车按钮
        $("#gouwuche").click(function () {
            /**
             * ajax请求   地址 /product/add_to_cart     参数 图书编号、数量
             */
            $.ajax({
                url: "/product/add_to_cart",
                type:"post",
                dataType: "json",
                contentType: 'application/json',
                data:JSON.stringify({"pid":id, "amount":$("#shulaing").val()}),
                success:function (json) {
                    if(json.state==200){
                        layer.open({
                            title: '提示'
                            ,content: "加入购物车成功！",
                        });
                    }else {
                        layer.open({
                            title: '提示'
                            ,content: "加入购物车失败！",
                        });
                    }
                }
            });
        });
    });
</script>
{#立即购买#}
<script type="text/javascript">
    $("#goumai").click(function (){
        $.ajax({
            url: "/product/add_to_cart",
            type:"post",
            dataType: "json",
            contentType: 'application/json',
            data:JSON.stringify({"pid":id, "amount":$("#shulaing").val()}),
            success:function (json) {
                if(json.state==200){
                    console.log(json.data)
                    var str="?cids="+json.data;
                    var url = "{{ url_for('product.confirm') }}";  //跳转到订单确定页面
                    location.href=url+str;
                }else {
                    alert("加入失败！");
                }
            }
        })
    });
</script>
<!--收藏按钮-->
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;

        $("#shoucang").click(function () {
            pathArray = window.location.pathname.split('/');
            id=pathArray[pathArray.length-1];
            title=document.getElementById("name").innerText+"-"+document.getElementById("author-1").innerHTML+"-"+document.getElementById("zhuanye").innerText;
            $.ajax({
                url:"/product/shoucang/add",
                type:"post",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({"bookid":id, "title":title, "price":document.getElementById("price-1").innerHTML}),
                success:function (json) {
                    if(json.state==200){
                        layer.open({
                            title: '提示'
                            ,content: "收藏成功！",
                        });
                    }else {
                        layer.open({
                            title: '提示'
                            ,content: "收藏失败！",
                        });
                    }
                }
            });
        });
    });
</script>
<!--搜索框-->
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        document.getElementById("searchs").onclick=function () {
            let zhi=document.getElementById("searchBox1").value;
            if(!zhi){
                layer.alert("请输入搜索内容！",{icon:2,anim:6});
            }else {
                $.ajax({
                    url:"/product/search/book",
                    type: "get",
                    data: {"bookname":zhi},
                    success:function (json) {
                        if(json.list.length!=0){
                            var url="{{ url_for('product.search') }}?bookname="+zhi;
                            location.href=url;
                        }else {
                            layer.alert("没有搜到你想要的书籍！",{icon:2,anim:6});
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>